<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="/WEB-INF/pages/include/css-resource.jsp"%>
<title>角色管理</title>
<style type="text/css">
.row {
	margin-bottom: 10px;
}
</style>
</head>
<body>
	<%@include file="/WEB-INF/pages/include/header.jsp"%>

	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/main.html"><i
					class="fas fa-home"></i>主页</a></li>
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/app/role/index.html">角色管理</a></li>
			<li class="breadcrumb-item active" aria-current="page">添加角色</li>
		</ol>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<form action="${pageContext.request.contextPath}/app/role/save.html"
					method="post">
					<input type="hidden" name="id" value="${role.id}">
					<div class="form-group row">
						<label for="code" class="col-sm-2 col-md-2 col-form-label">角色编码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="code" name="code"
								value="${role.code}" required autofocus>
						</div>
					</div>
					<div class="form-group row">
						<label for="name" class="col-sm-2 col-md-2 col-form-label">角色名称</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="name" name="name"
								value="${role.name}" required>
						</div>
					</div>
					<div class="form-group row">
						<label for="mnemonic" class="col-sm-2 col-md-2 col-form-label">助记码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="mnemonic"
								name="mnemonic" value="${role.mnemonic}" required>
						</div>
					</div>
					<div class="form-group row">
						<label for="disabled" class="col-sm-2 col-md-2 col-form-label"></label>
						<div class="col-sm-10">
							<div class="custom-control custom-checkbox mr-sm-2">
								<input type="checkbox" class="custom-control-input"
									id="disabled" name="disabled" ${role.disabled?"checked":""}>
								<label class="custom-control-label" for="disabled">禁用</label>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<div class="col-12">
							<hr />
						</div>
					</div>
					<div class="form-group row">
						<label for="disabled" class="col-sm-2 col-md-2 col-form-label">角色权限</label>
						<div class="col-sm-10">
							<c:forEach items="${requestScope.fmList}" var="f">
								<div class="row">
									<div class="col-12 function-group">
										<div class="custom-control custom-checkbox mr-sm-2">
											<input type="checkbox" class="custom-control-input"
												id="fg${f.id}" name="function" value="${f.id}" onchange="selectFunctionGroup('${f.id}')" ${f.selected?"checked":""}> <label
												class="custom-control-label" for="fg${f.id}"><i
												class="fas fa-th-list"></i>&nbsp;${f.name}</label>
										</div>
										<div id="fm${f.id}" class="row">
											<c:forEach items="${f.functionalModule}" var="fm">
												<div class="col-sm-4 col-md-3">
													<div class="custom-control custom-checkbox mr-sm-2">
														<input type="checkbox" class="custom-control-input"
															id="c${fm.id}" name="function" value="${fm.id}" onchange="selectFunctionModule('${fm.id}','${f.id}')" ${fm.selected?"checked":""}>
														<label class="custom-control-label" for="c${fm.id}">${fm.name}</label>
													</div>
												</div>
											</c:forEach>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
					<div class="form-gorup row">
						<div class="col-sm-6">
							<button type="submit" class="btn btn-primary btn-block">保存</button>
						</div>
						<div class="col-sm-4">
							<button type="reset" class="btn btn-danger btn-block">重置</button>
						</div>
						<div class="col-sm-2">
							<button type="button" class="btn btn-secondary btn-block"
								onclick="back()">返回</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p id="message" class='${code==0?"text-success":"text-danger"}'>${message}</p>
				<c:if test="${message!=null}">
					<script type="text/javascript">
						setTimeout(function() {
							$("#message").text("");
						}, 5000);
					</script>
				</c:if>
			</div>
		</div>
	</div>

	<%@include file="/WEB-INF/pages/include/js-resource.jsp"%></body>

<script type="text/javascript">
	function selectFunctionModule(id,functionGroupId){
		if($("#c"+id).is(":checked")){
			$("#fg"+functionGroupId).prop('checked', true);
		}else{
			isUnselectAll=true;
			$("#fm"+functionGroupId+" input[type='checkbox']").each(function(){
				if($(this).is(":checked")){
					isUnselectAll=false;
					return;
				}
			});
			if(isUnselectAll){
				$("#fg"+functionGroupId).prop('checked', false);
			}
		}
	}

	function selectFunctionGroup(id){
		if($("#fg"+id).is(":checked")){
			//全选
			$("#fm"+id+" input[type='checkbox']").each(function(){
				$(this).prop('checked', true);
			});
		}else{
			//全取消
			$("#fm"+id+" input[type='checkbox']").each(function(){
				$(this).prop('checked', false);
			});
		}
	}

	function back() {
		history.back();
	}
</script>
</body>
</html>